<template>
    <div class="fileLine">
        <div style="width: 120px;text-align:right">商品图片</div>
        <el-upload style="margin-left:10px;" :action="uploadURL + '/file/imgUpload'" :on-preview="handlePreview"
            :on-remove="handleRemove" :on-success="uploadSuccess" :file-list="fileList" list-type="picture-card">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>

<script>
export default {
    props: {
        field: {
            type: String,
            default: ""
        },
        required: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
        value: {
            type: [String, Number, Array],
            default: ""
        },
    },
    data() {
        return {
            uploadURL: process.env.VUE_APP_API_URL,
            fileList: []
        };
    },
    watch: {
        value: {
            handler(nv, ov) {
                if(nv.map) {
                    this.fileList = nv.map(item => {
                        return {
                            name: item,
                            url: item
                        }
                    });
                }
                console.log(2, this.fileList)
                
            }, 
            immediate: true
        }
    },
    methods: {
        uploadSuccess(resp, file, fileList) {
            this.fileList.slice();
            this.fileList.push({
                name: file.name,
                url: resp.data.url
            })
            let newList = this.fileList.map(item => item.url);
            this.$emit("input", newList);
        },
        handleRemove(file, fileList) {
            this.$emit("input", fileList.map(item => item.url));
        },
        handlePreview(file) {
            console.log(file);
        }
    }
}
</script>

<style lang="scss" scoped>
.fileLine {
    display: flex;

}
</style>